<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script  type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#first_category").on("change", function(){
		$.ajax({
			type:"POST",
			url:"controller",
			data:{"command":"second_category", "firstCategoryId":$("#first_category").val()},
			dataType:"JSON",
			beforeSend:function(){
				//선택된 것이 0번 index면 전송하지 않는다.
				if(document.getElementById("first_category").selectedIndex==0){
					alert("대분류를 선택하세요");
					$("#second_category").empty().append("<option value='DEFAULT'>중분류</option>");
					$("#third_category").empty().append("<option value='DEFAULT'>소분류</option>");
					$("#thead").empty();
					$("#tbody").empty();
					$("#product_info_layer").hide();
					return false;
				}
			},
			success:function(jsonData){
				//상품정보 출력 layer 감추기
				$("#product_info_layer").hide();
				//소분류 항목 삭제
				$("#third_category").empty().append("<option value='DEFALUT'>소분류</option>");
				//테이블 삭제
				$("#thead").empty();
				$("#tbody").empty();
				
				//중분류 추가
				var str = "<option value='default'>중분류</option>";
				for(var i = 0; i<jsonData.length;i++){
					str = str+"<option value='"+jsonData[i].SECOND_CATEGORY_ID+"'>"+ jsonData[i].SECOND_CATEGORY_NAME+"</option>";
				}
				//$("#second_category").html(str);
				//or
				$("#second_category").empty().append(str);
			},
			error:function(xhr, status, err){//오류 응답 후 호출될 callback함수 - 1번 : xhr, 2번 : 응답상태 : error, 3번 error메세지
				alert(status+", "+xhr.readyState+" "+err);
			}
		});
	});
	$("#second_category").on("change", function(){
		$.ajax({
			type:"POST",
			url:"controller",
			data:{"command":"third_category", "secondCategoryId":$("#second_category").val()},
			dataType:"JSON",
			beforeSend:function(){
				//선택된 것이 0번 index면 전송하지 않는다.
				if(document.getElementById("second_category").selectedIndex==0){
					alert("중분류를 선택하세요");
					$("#third_category").empty().append("<option value='default'>소분류</option>");
					$("#thead").empty();
					$("#tbody").empty();
					$("#product_info_layer").hide();
					return false;
				}
			},
			success:function(jsonData){
				//테이블 삭제
				$("#thead").empty();
				$("#tbody").empty();
				//상품정보 출력 layer 감추기
				$("#product_info_layer").hide();
				//추가
				var str = "<option value='default'>소분류</option>";
				
				for(var i=0;i<jsonData.length;i++){
					str = str +"<option value='"+jsonData[i].THIRD_CATEGORY_ID+"'>"+jsonData[i].THIRD_CATEGORY_NAME+"</option>";
				}
				$("#third_category").html(str);
				//or
				//$("#third_category").empty().append(str);
			},
			error:function(xhr, status, err){//오류 응답 후 호출될 callback함수 - 1번 : xhr, 2번 : 응답상태 : error, 3번 error메세지
				alert(status+", "+xhr.readyState+" "+err);
			}
		});
	});
	$("#third_category").on("change", function(){
		$.ajax({
			type:"POST",
			url:"controller",
			data:{"command":"get_product_list", "thirdCategoryId":$("#third_category").val()},
			dataType:"JSON",
			beforeSend:function(){
				if($("#third_category option").index($("#third_category option:selected"))==0){//jQuery select 이용한 처리
					alert("소분류를 선택하세요");
					$("#thead").empty();
					$("#tbody").empty();
					$("#product_info_layer").hide();
					return false;
				}
			},
			success:function(jsonData){
				//상품정보 출력 layer 감추기
				$("#product_info_layer").hide();
				//thead 처리
				$("#thead").empty().append($("<tr>")
											  	.append($("<td>").text("제품ID"))
												.append($("<td>").text("제품명"))
												.append($("<td>").text("제조사"))
												.append($("<td>").text("제품가격")));
				//tbody 처리
				$("#tbody").empty();
				$.each(jsonData, function(){
					$("#tbody").append(
							$("<tr>").append($("<td>").text(this.productId))
										  .append($("<td>").text(this.productName))
									  	  .append($("<td>").text(this.productMaker))
									  	  .append($("<td>").text(this.productPrice))
					);
				});
				/*
				for(var i=0; i<jsonData.length; i++){
					//tr에 td들을 붙여야 하므로 append($(<tr>).append...)
					$("#tbody").append(
							$("<tr>").append($("<td>").text(jsonData[i].productId))
										  .append($("<td>").text(jsonData[i].productName))
									  	  .append($("<td>").text(jsonData[i].productMaker))
									  	  .append($("<td>").text(jsonData[i].productPrice))
					);
				}*/
			},
			error:function(xhr, status, err){//오류 응답 후 호출될 callback함수 - 1번 : xhr, 2번 : 응답상태 : error, 3번 error메세지
				alert(status+", "+xhr.readyState+" "+err);
			}
		});
	});
});




</script>
<style type="text/css">
table, th, td{
	border-collapse: collapse;
	border: 1px solid black;
	
}
table{
width:700px;
}
select{
	width:150px;
}

</style>
</head>
<body>
대분류 : 
<select name="first_category" id="first_category">
<OPTION VALUE='DEFAULT'>대분류</OPTION>
<c:forEach var="fc" items="${requestScope.firstCategory }">
	<option value="${fc.FIRST_CATEGORY_ID }">
		${fc.FIRST_CATEGORY_NAME  }
	</option>
</c:forEach>
</select>
중분류 : 
<SELECT id="second_category">
	<OPTION VALUE='DEFAULT'>중분류</OPTION>
</SELECT>
소분류 : 
<SELECT id="third_category">
	<OPTION VALUE='DEFAULT'>소분류</OPTION>
</SELECT>
<p> 
<table>
	<thead id="thead"></thead>
	<tbody id="tbody"></tbody>
</table>
</body>
</html>










